@require '~styles/variables'
@require '~styles-lib/mixins'

.-statbar
	theme-prop('border-bottom-color', 'bg-subtle')
	display: flex
	align-items: flex-end
	margin-bottom: $line-height-computed
	border-bottom-style: solid
	border-bottom-width: 1px

// This will push the stats to the right side of the component on mobile.
.-split
	flex: auto

.-rating, .-stat
	padding-bottom: $line-height-computed * 0.75
	flex: none

.-rating
	theme-prop('border-bottom-color', 'bg-subtle')
	border-bottom-style: solid
	border-bottom-width: 2px

.-stat
	theme-prop('color', 'fg')
	margin-right: $grid-gutter-width
	border-bottom-style: solid
	border-bottom-width: 2px
	border-bottom-color: transparent
	padding-bottom: ($line-height-computed * 0.75) - 5px

	a&:hover
		theme-prop('border-bottom-color', 'highlight')

	// When ratings are disabled, we don't want any margin on the left.
	.-ratings-disabled &:first-child
		margin-right: 0

.-label
	font-size: $font-size-small

.-metric
	font-size: $font-size-large
